<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <template>
        <el-input
          style="width: 350px"
          placeholder="请输入内容"
          v-model="input"
          clearable @clear='getTableData()'
          ><el-button slot="append" icon="el-icon-search" @click="getTableData()"></el-button>
        </el-input>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          :border="true"
          page-size="5"
          :cell-style="rowStyle"
        >
          <el-table-column
            header-align="center"
            type="index"
            width="50"
          ></el-table-column>
          <el-table-column
            header-align="center"
            prop="goods_name"
            label="商品名称"
            width="600"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="goods_price"
            label="商品价格"
            width="160"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="goods_weight"
            label="商品重量"
            width="160"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="add_time"
            label="创建时间"
            width="250"
          >
            <template slot-scope="scope">
              {{ scope.row.add_time | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="address"
            label="操作"
            width="180"
          >
            <template slot-scope="scope">
              <el-button type="danger" @click="handledelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <!-- <span class="demonstration">完整功能</span> -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      input: '',
      total: 0,
      currentPage4: 1,
      pagecount: 5,
      pagesize:1
    }
  },
  created() {
    this.Fn()
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pagecount = val
      this.Fn()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage4 = val
      this.Fn()
    },
    resetDateFilter() {
      this.$refs.filterTable.clearFilter('date')
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter()
    },
    formatter(row, column) {
      return row.address
    },
    filterTag(value, row) {
      return row.tag === value
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
    rowStyle() {
      return 'text-align:center'
    },
    handledelete(row) {
      // console.log(row.goods_id)
      this.$confirm('此操作将永久删除此商品且无法撤销, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$http({
            url: `goods/${row.goods_id}`,
            method: 'delete',
            id: 1,
          }).then((rel) => {
            this.$http({
              url: '/goods',
              params: {
                pagenum: 1,
                goods_name: 10,
                pagesize: this.pagecount,
                goods_id: 10,
                total: '',
              },
            }).then((res) => {
              this.tableData = res.data.data.goods
              console.log(res)
              this.total = res.data.data.total
            })
          })
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    Fn() {
      this.$http({
        url: '/goods',
        params: {
          pagenum: this.currentPage4,
          goods_name: 10,
          pagesize: this.pagecount,
          goods_id: 10,
          total: 0,
        },
      }).then((res) => {
        this.tableData = res.data.data.goods
        console.log(res)
        this.total = res.data.data.total
      })
    },
    async getTableData() {
      let res=await this.$http({
        url:'/goods',
        params:{
          query:this.input,
          pagenum:this.currentPage4,
          pagesize:this.pagesize
        }
      })
      console.log(res)
      if(res.status!==200){
        return this.$message.error('获取商品列表失败')
      }
      this.tableData=res.data.data.goods
      this.total=res.data.data.total
      this.$message({
        message:'检索成功',
        type:'success'
      })
    },
  },
}
</script>

<style lang="less" scoped>
.el-input__suffix {
  width: 200px;
  background-color: #5d5858;
}
</style>
